<template>
  <div class="echartWrap">
    <!-- 饼图 -->
    <template v-if="type == 'pie'">
      <Pie :type="type" :setting="setting" :data="data"></Pie>
    </template>
    <!-- 柱形图 -->
    <template v-else-if="['bar'].includes(type)">
      <Bar :type="type" :setting="setting" :data="data"></Bar>
    </template>
    <!-- 条形图 -->
    <template v-else-if="['column'].includes(type)">
      <Column :type="type" :setting="setting" :data="data"></Column>
    </template>
    <template v-else-if="['category'].includes(type)">
      <!-- 面积图 -->
      <Areas :type="type" :setting="setting" :data="data"></Areas>
    </template>
    <template v-else-if="['line'].includes(type)">
      <!-- 折线图 -->
      <Lines :type="type" :setting="setting" :data="data"></Lines>
    </template>
  </div>
</template>
<script>
import Pie from "./components/pie.vue";
import Bar from "./components/bar.vue";
import Areas from "./components/areas.vue";
import Lines from "./components/lines";
import Column from "./components/Column";
export default {
  name: "ManageEchart",
  components: { Pie, Bar, Areas, Lines, Column },
  props: {
    // 类型
    type: {
      type: String,
      default: () => "",
    },
    setting: {
      type: Object,
      default: () => {},
    },
    data: {
      type: [Object, Array],
      default: () => [],
    },
  },
  mounted() {},
};
</script>
<style lang="less" scoped>
.echartWrap {
  width: 100%;
  height: 100%;
}
</style>
